<template>
  <div class="tags-wrap">
    <div class="title">{{ title }}</div>
    <div class="tags-list">
      <TagItem :class="[ item.active ? 'active' : '' ]" v-for="(item, index) of dictList" :item="item" :key="index">
        {{ item.fullName }}
      </TagItem>
    </div>
  </div>
</template>

<script setup>
import TagItem from '../TagItem/index.vue';
import { useDictSelect } from '@/store/base.js';
import { ref, reactive, onMounted } from 'vue'; 
  
  const props = defineProps({
    title: { type: String, default: '' },
    type: { type: String, default: '' },
  })

  const dictList = ref([]);
  const { dictSelectArray, setDictSelect } = useDictSelect();

  onMounted(() => {
    setDictSelect( props.type ).then(data => {
      //  对数据进行加工，给定一个 active 的值 用来后期切换
      dictList.value = data.map(_s => {
        _s.active = false;
        return _s;
      });
    })
  })



  //  创建一个列表 用来记录选中的标签
  const tagList = ref([]);
</script>

<style lang="scss" scoped>
  .active {
    border: .1rem solid pink;
    color: pink;
  }

  .tags-wrap {
    padding: 3rem 1rem 0;
    box-sizing: border-box;

    .title {
      font-size: 1.4rem;
    }

    .tags-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
</style>